<!--  -->
<template>
  <div class="visitor-container">
    <div class="flex-row justify-between">
      <!-- 条件查询 -->
      <div class="searchBox">
        <el-form inline :model="paramVo.shiftVo" class="demo-form-inline" label-position="left" label-width="80px">
          <el-form-item label="类型编号">
            <el-select v-model="paramVo.shiftVo.shiftName" placeholder="请选择类型编号" clearable style="width: 280px;">
              <!-- <el-option label="电子设备" value="1" />
              <el-option label="生产设备" value="2" />
              <el-option label="办公设备" value="3" /> -->
            </el-select>
          </el-form-item>
          <el-form-item label="类型名称">
            <el-input
              v-model="paramVo.shiftVo.shiftName"
              style="width: 280px;"
              placeholder="请输入类型名称"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="mg-top-4" style="flex-shrink: 0;">
        <el-button type="info" @click="handleQuery">查询</el-button>
      </div>
    </div>
    <!-- 添加按钮 -->
    <add-button title="新增类型" @addClick="handleAdd" />
    <!-- table -->
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      header-cell-class-name="table-header-cell"
      header-row-class-name="table-header-row"
      class="table-container"
    >
      <el-table-column prop="shiftNumber" label="类型编号" />
      <el-table-column prop="shiftName" label="类型名称" />
      <el-table-column prop="shiftNum" label="单位" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <!-- <el-button type="text" size="mini" style="color: blue" @click="updateDetails(scope.row.id)">修改</el-button>
          <span>|</span>
          <el-button type="text" size="mini" style="color: red" @click="cancalDetails(scope.row.id)">删除</el-button> -->
          <el-link
            type="primary"
            :underline="false"
            class="upStr"
            @click="updateDetails(scope.row.id)"
          >
            修改
          </el-link>
          <span class="line">|</span>
          <el-link
            type="danger"
            :underline="false"
            class="upStr redBtn"
            @click="cancalDetails(scope.row.id)"
          >
            删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      :total="total"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="paging.pageSize"
      :current-page="currentPage"
      layout="total, prev, pager, next, jumper"
    />
    <!-- 新增类型 -->
    <el-dialog title="新增类型" :visible.sync="dialogFormVisibleAdd" width="30%">
      <el-form ref="pushData" :model="pushData" class="addForm">
        <el-form-item label="类型名称">
          <el-input
            v-model="pushData.shiftName"
            style="width: 250px;"
            placeholder="请输入类型名称"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit('pushData')">提交</el-button>
        <el-button @click="cancal">取消</el-button>
      </div>
    </el-dialog>
    <!-- 修改类型 -->
    <el-dialog title="修改类型" :visible.sync="dialogFormVisibleUpdate" width="30%">
      <el-form ref="pushData" :model="pushData" class="addForm">
        <el-form-item label="类型编号">
          164945165
        </el-form-item>
        <el-form-item label="类型名称">
          <el-input
            v-model="pushData.shiftName"
            style="width: 250px;"
            placeholder="请输入类型名称"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit('pushData')">提交</el-button>
        <el-button @click="cancal">取消</el-button>
      </div>
    </el-dialog>
    <!-- 删除车间 -->
    <div class="deleteWorkShop">
      <div class="cancalContent">
        <el-dialog
          title="删除车间"
          :visible.sync="cancalDialogVisible"
          width="30%"
        >
          <div class="deletaVistor">
            <i slot="prefix-icon" class="el-input__icon el-icon-info" />
            <span>您正在删除产品类型，请务必谨慎操作！</span>
          </div>
          <div class="deleteMsg">
            <el-row>
              <span>类型编号：</span>
              <span>{{ pushData.shiftNumber }}</span>
            </el-row>
            <el-row>
              <span>类型名称：</span>
              <span>{{ pushData.shiftName }}</span>
            </el-row>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitDelete(pushData.id)">确定</el-button>
            <el-button @click="cancalDelete">取消</el-button>
          </div>
        </el-dialog>
      </div>
      <div class="cancalWarn">
        <el-dialog
          title="删除车间"
          :visible.sync="cancalDialogVisibleWarning"
          width="30%"
        >
          <div class="deleteMsg">
            <p>有正在使用该类型的产品，无法删除</p>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="closeDialog">关闭</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import AddButton from '@/components/add-button/index.vue'
// import { findShiftPageByParam, addShift, findShiftById, updateShift, delShift } from '@/api/Frequency/index'
export default {
  components: { AddButton },
  filters: {},
  data() {
    return {
      // listLoading: true,
      title: '',
      showItem: true, // 是否展开
      currentPage: 1, // 默认当前页
      dialogFormVisibleAdd: false, // 新增弹窗
      dialogVisible: false, // 提交
      cancalDialogVisible: false, // 删除
      cancalDialogVisibleWarning: false,
      dialogFormVisibleUpdate: false, // 修改类型
      queryInfo: {
        userName: '',
        phone: ''
      },
      paging: {
        pageNo: 1,
        pageSize: 10
      },
      workTime: {},
      paramVo: {
        shiftVo: {
          shiftName: '',
          shiftNumber: '',
        },
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      pushData: {
        shiftName: '',
        workEndTime: '',
        workStartTime: ''
      },
      tableData: [
        { shiftNumber: '123456', shiftName: '我的是你的', shiftNum: '个' }
      ]
    }
  },
  computed: {},
  // created() {
  //   this.getList()
  // },
  mounted() {},
  methods: {
    // 获取产品列表
    getList() {
      console.log('获取列表')
      // findShiftPageByParam(this.paramVo).then(response => {
      //   console.log(response)
      //   this.total = response.total
      //   this.listLoading = false
      //   this.tableData = response.records
      //   this.paging.pageNo = response.pageNo
      //   this.paging.pageSize = response.pageSize
      // })
    },
    // 修改产品信息
    updateDetails(id) {
      console.log('修改')
      this.dialogFormVisibleUpdate = true
      // findShiftById(id).then(response => {
      //   // console.log(response)
      //   this.pushData.shiftName = response.shiftName
      //   this.pushData.workStartTime = response.workStartTime
      //   this.pushData.workEndTime = response.workEndTime
      // })
    },
    // 删除产品信息
    cancalDetails(id) {
      console.log('删除')
      this.cancalDialogVisible = true
      // findShiftById(id).then(response => {
      //   console.log(response)
      //   this.pushData = response
      // })
    },
    // 提交添加产品信息
    submit(formName) {
      this.dialogFormVisibleAdd = false
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     if (this.pushData.id != null) {
      //       updateShift(this.pushData).then(response => {
      //         if (response === true) {
      //           this.$message({
      //             message: '消息修改成功！',
      //             type: 'success'
      //           })
      //           this.getList()
      //         }
      //       })
      //     } else {
      //       this.pushData.workStartTime = this.pushData.workStartTime.getTime()
      //       this.pushData.workEndTime = this.pushData.workEndTime.getTime()
      //       // console.log(this.pushData.workStartTime.getTime())
      //       addShift(this.pushData).then(response => {
      //         if (response === true) {
      //           this.$message({
      //             message: '消息添加成功！',
      //             type: 'success'
      //           })
      //           this.getList()
      //         }
      //       })
      //     }
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    },
    // 取消提交添加产品信息
    cancal() {
      this.dialogFormVisibleAdd = false
    },
    handleReset() {
      this.queryInfo.userName = ''
      this.queryInfo.phone = ''
      // this.handleQuery()
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.paging.pageNo = val
      this.getList()
    },
    // 添加产品信息按钮
    handleAdd() {
      this.title = '新增班次'
      this.dialogFormVisibleAdd = true
      this.pushData = {}
    },
    // 查询
    handleQuery() {
      console.log('查询')
      this.paging.pageNo = 1
      this.getList()
      // console.log(this.productStatisticsVo)
    },
    // 删除提交
    submitDelete(id) {
      console.log('删除')
      // delShift(id).then(response => {
      //   console.log(response)
      //   if (response === true) {
      //     this.$message({
      //       message: '产品删除成功！',
      //       type: 'success'
      //     })
      //     this.cancalDialogVisible = false
      //     this.getList()
      //   }
      // })
    },
    // 取消删除提交
    cancalDelete() {
      this.cancalDialogVisible = false
      console.log('取消删除提交')
    },
  //   // 关闭删除警告
    closeDialog() {
      this.cancalDialogVisibleWarning = false
    }
  }
}
</script>
<style lang="scss" scoped>
.visitor-container {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}
.query-container {
  display: flex;
  flex-direction: row;
}
.dialog-footer{
    text-align: center;
}
.subSuccess{
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}
.deletaVistor{
    color: #d12d1f;
    text-align: center;
    font-size: 16px;
}
.deleteMsg{
    margin-left: 137px;
    line-height: 25px;
    font-size: 15px;
}
.addForm{
  margin-left: 100px;
}
.el-link.el-link--primary{
    color:#409eff;
  }
  .el-link.el-link--primary:hover{
    color:#40afff;
  }
  .el-link.el-link--danger{
    color:#D12F1F;
  }
  .el-link.el-link--danger:hover{
    color:#E23F1F;
  }
  .upStr{
    width:46px;
    text-align: center;
  }
  .line{
    color:#aaa;
    width:20px;
    text-align:center;
  }
.cancalContent{
  top: 100px;
  left: 150px;
}
</style>
